<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录</title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<link rel="stylesheet" href="css/reset.css" type="text/css" />
		<link rel="stylesheet" href="css/utrls.css" type="text/css" />
		<link rel="stylesheet" href="css/login.css" type="text/css" />
	</head>
	<body>
		<div class="main">
			<div id="loginForm" class="form">
				<h2>登录</h2>
				<input type="text" class="user" placeholder="账号" id="login_user" required><br>
				<input type="password" class="password" placeholder="密码" id="login_password" required><br>
				<div class="form-group captcha-group">
					<label for="captcha-answer">验证码:</label>
					<input type="text" id="captcha-answer" class="form-control yzm" required>
					<div id="captcha-question" style="color: white;"></div>
				</div>
				<button type="submit" onclick="login(event)">登录</button> <br>
				<a href="register.html">注册</a><br>
				<div class="checkbox">
					<input type="checkbox" class="radio" name="agreement" id="agree" />
					<label for="agree" class="checkbox-label">
						<span class="custom-checkbox checkmark"></span>
						同意《服务条款》《隐私政策》《儿童隐私政策》
					</label>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(document).ready(function() {
			// 生成一个简单的数学运算验证码
			function generateCaptcha() {
				const operators = ['+', '-', '*'];
				const operator = operators[Math.floor(Math.random() * operators.length)];
				const num1 = Math.floor(Math.random() * 10) + 1;
				const num2 = Math.floor(Math.random() * 10) + 1;
				let question = `${num1} ${operator} ${num2}`;
				let answer = eval(question); // 计算正确答案
				$('#captcha-question').text(`${question}`);
				return answer;
			}
			// 初始化验证码
			let correctAnswer = generateCaptcha();
			// 登录函数
			function login(event) {
				event.preventDefault(); // 阻止表单默认提交
				var username = document.getElementById('login_user').value;
				var password = document.getElementById('login_password').value;
				const userAnswer = parseInt($('#captcha-answer').val());
				if ($('#agree').is(':checked')) { // 检查用户是否同意条款
					if (userAnswer === correctAnswer) {
						if (username === 'admin' && password === '123456') {
							window.location.href = 'index.html'; // 直接跳转
						} else {
							alert("用户名和密码有误");
							$('#captcha-answer').val('');
							$('#login_user').val('')
							$('#login_password').val('')
							$('#agree').prop('checked', false); 
							correctAnswer = generateCaptcha();
							return;
						}
					} else {
						alert('验证码错误，请重试！');
						// 清空输入框并生成新的验证码
						$('#captcha-answer').val('');
						$('#login_user').val('')
						$('#login_password').val('')
						$('#agree').prop('checked', false); 
						correctAnswer = generateCaptcha();
					}
				} else {
					alert('请先同意服务条款！');
					$('#captcha-answer').val('');
					$('#login_user').val('')
					$('#login_password').val('')
					correctAnswer = generateCaptcha();
				}
			}

			// 绑定登录按钮的点击事件
			$('#loginForm button[type="submit"]').on('click', login);
		});
	</script>
</html>